デザイナーが集まってアラートを話し合ってみた

今回はアラートについて対話しました。

これまでの共有会

• デザイナーが集まって命名ルールを話し合ってみた
• デザイナーが集まってインプットUIを話し合ってみた
• デザイナーが集まってモーダルUIを話し合ってみた
• デザイナーが集まってログイン画面について話し合ってみた
• デザイナーが集まってボタンについて話し合ってみた
• デザイナーが集まってキャンセルボタンを話し合ってみた
• デザイナーが集まってタブバーを話し合ってみた

情報共有して認識を合わせることが目的のため、「クラスメソッドではこうしてます！」みたいなものではない点はご了承ください。

アラートとは

注意や警告などの重要な情報を提供し、ユーザーに確認を求めるコンポーネントです。

使用シーン

ユーザーが破壊的なアクションや取り消せない操作を行うときに使用します。
その操作が完了する前に「アラート」をだし、ユーザーに「本当に実行して良いか」確認を求めます。

構成要素

アラートを構成する要素は、4つあります。

1. タイトル
2. 説明文
3. ボタン
4. テキストフィールド

要素ごとに気をつけるポイントを紹介します。

1. タイトル

• 状況を明確かつ簡潔に説明するタイトルにする
• 「エラー」など、有用な情報ではないタイトルは避ける
• 2行以上の長いタイトルは避ける

2. 説明文

• 状況の結果や、解決策や代替手段などを記載する
• 説明文は出来るだけ短くする
• 説明文の必要がなければ省く

説明文のないアラート例

3. ボタン

• 明確な選択肢を与えるため、ボタンは2つにする。ただ、必要に応じてボタンを追加することもできる
• 非破壊的なボタンのタイトルは必ず「キャンセル」にする
• 破壊的なボタンは、ユーザーが識別できるよう、破壊的なスタイルを使用する

選択肢が3つの場合のアラート例

4. テキストフィールド

※状況を解決するための意見が必要な場合に使用する

タイトルを省いたアラート

タイトルは状況を明確かつ簡潔に伝えることができる大切な要素ですが、そんなタイトルを省いているアラートもありました。

このアラートは、LINEのトーク画面から送信済みのメッセージを削除する時に出るアラートです。なぜタイトルを省いたのか、この画面になる前の動き（メッセージを削除するフロー）を確認してみましょう。

1. 削除したいメッセージを選択し「削除」をタップ
2. 画面は「メッセージを削除」のモーダルに変わる
3. 削除ボタンをタップ
4. アラートが出る

フローを見るとアラートが出る前の画面は「メッセージを削除」のモードに入っていることがわかりました。アラートは、予期しない致命的な場面において、ユーザーに内容を簡潔に伝えるためタイトルを使用します。今回の場合は、ユーザーが能動的にアクションをとっているため、文脈の理解があると判断しタイトルを省いたのだと考えます。
一連の流れを確認してから、アラートに必要な要素を検討していきましょう。

アラートを使用する上で気をつけること

アラートを多用しない

アラートは、進行中のタスクを中断し重要な情報を提供します。そのため、アラートを出す頻度が多いとユーザーは何度もタスクを中断させられ、使いづらいと感じてしまうでしょう。また、多用することで重要性は低くなり、ユーザーはアラートに注意を払えなくなります。
アラートを使用する際は、アラートとして情報を提供するべきかどうか確認してから使うようにしましょう。

アラートは可能な限りスクロールを使用しない

アラートのタイトルや説明文を短くすることに注力しましょう。なぜなら、長文になるほど人は文字を読まなくなるからです。必要な情報が伝わるよう、スクロールしない程度の文字数になるよう心がけましょう。

さいごに

社内勉強会で基本的なアラートについての認識を合わせました。
アラートは重要な情報を提供するコンポーネントです。使用する際は見た目だけでなく、その使用シーンにも注意を払い検討していきたいと思います。
今回の内容が少しでもお役に立てれば幸いです。

参考

• Human Interface Guidelines - Alerts
• キャンセルのキャンセル問題から考えるダイアログデザイン
• ユーザーはいかにテキストを読まないか